<template>
  <div class="ffclIndex">
  <Aside></Aside>
  <Header :title="title" @toggleMenu="toggleMenu" @navToBack="navToBack"></Header>
  <div class="ffcl">
    <div class="ffclScroll">
      <div class="tabWrap">
        <div class="ffclTab">
          <p  v-for="(item,index) in ffclTab" @click.stop="choiseHead(index)"
              :style="{width:width+'px'}"
              :class="{'active':defaultIndex==index}">
            <router-link :to="{name:'ffcl',query:{id:item.id}}">
              <a >{{item.name}}</a>
            </router-link>
          </p>
        </div>
      </div>

    </div>
    <!--ffclContent-->
    <div class="ffclContent">
      <div class="ffclContentItem active" v-for="(item,index) in itemList">
        <router-link :to="{path:'/article',query:{id:item.id,url:item.url,is_praise:item.is_praise}}"  >
            <a class="ffclItemList" >
              <div class="ffclItemLeft">
                <img :src=item.thumb alt="" onerror="this.onerror=null; this.src='../../static/images/codeCover2.jpg'">
              </div>
              <div class="ffclItemRight">
                <p class="ffclTitle">
                  {{item.title}}</p>
                <p class="ffclDate">
                  <span class="ffclDetailData">{{item.ctime}}</span>
                  <span class="ffclTopic">{{item.name}}</span>
                </p>
              </div>
            </a>
        </router-link>
      </div>
    </div>
  </div>
    <!--加载更多-->
    <div class="loadComponent">
      <div class="weui-loadmore weui-loadmoreIng" v-if="loadmoreClick">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips" >正在加载</span>
      </div>
      <div class="weui-loadmore weui-loadmore_line" v-if="nomoreData">
        <span class="weui-loadmore__tips">到底了</span>
      </div>
      <div class="loadMore" style="display:block" @click.stop="loadMore" v-if="moreData">
        更多
      </div>
    </div>
    <div id="loadingToast" v-if="showLoading">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
      </div>
    </div>
  </div>
</template>
<script >
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  import {mapState} from 'vuex'
  export default({
    data (){
      return {
        title:'反腐倡廉',
        defaultIndex:0,
        ffclTab:[],
        defaultPage:1,
        nomoreData:false,
        loadmoreClick:false,
        moreData:true,
        showLoading:false,
        itemList:[],
        width:''
      }
    },
    components:{
      Aside:aside,
      Header:header
    },
    methods:{
      navToBack(){
        this.$router.go(-1);//返回上一层
      },
      choiseffclTab (index){
        this.defaultIndex =index
      },
      toggleMenu(){
        $('.aside').toggleClass('active')
        $('body').toggleClass('active')
        if($('.aside').hasClass('active')){
          $('#toggleBtn').find('.img2').hide()
          $('#toggleBtn').find('.img1').show()
        }else{
          $('#toggleBtn').find('.img1').hide()
          $('#toggleBtn').find('.img2').show()
        }
      },
      loadMore (){
        this.loadmoreClick =!this.loadmoreClick
        this.moreData =false
        this.defaultPage ++
        this.fetchData(this.$route.query.id,this.defaultPage)
      },
      choiseHead(index){
        this.defaultIndex =index
        this.showLoading =true
        this.defaultPage =1
        this.itemList =[]
        this.moreData =true
        this.loadmoreClick =false
        this.nomoreData =false
        this.fetchData(this.$route.query.id,this.defaultPage)
      },
      fetchData(id='all',page=1){
//        console.log(id)
//        console.log(page)
        let that =this
        if(id==='all'){
          this.showBanner =true
        }else{
          this.showBanner =false
        }
        this.axios.get('/home/clear/getClearNews?'+`${this.baseUrl}`,{
          params:{
            cate_id:id,
            p:page,
            uid:this.uid
          }
        }).then((res)=>{
//          console.log(res.data.data)
          if(res.data.data.length>=0){
            if(this.loadmoreClick){
              this.loadmoreClick =false
              this.moreData =true
            }
            if(res.data.data.length ===0){
              this.nomoreData =true
              this.moreData =false
              this.loadmoreClick =false
            }
            that.showLoading=false
          }
          this.itemList.push(...res.data.data)
//          console.log(this.itemList)
        })
          .catch((err)=>{
            console.log(err)
            if(this.loadmoreClick){
              this.loadmoreClick =false
            }
            that.showLoading=false
          })
      },
      init(){
          this.axios.get('/home/clear/getClearCate?'+`${this.baseUrl}`)
            .then((res)=>{
//              console.log(res.data.data)
              this.ffclTab =res.data.data
              for(var i=0;i<res.data.data.length;i++){
                if(this.$route.query.id ==res.data.data[i].id){
                    this.defaultIndex=i
                }
              }
              var clientWidth =document.documentElement.clientWidth
              if(clientWidth>=750){
                clientWidth =$('body').width()
              }
              var pWidth =clientWidth/4;
              this.width =pWidth
              $('.ffclTab').css('min-width', res.data.data.length*pWidth+'px')
              $('.tabWrap').scrollLeft(this.defaultIndex*pWidth)
            })
      }
    },
    computed:{
      ...mapState({
        uid:state=>state.app.loginState.uid||localStorage.getItem('uid')
      })
    },
    mounted (){
      $('body').removeClass('active')
      this.init()
      this.fetchData(this.$route.query.id,this.defaultPage)
    }
  })
</script>
<style scoped>
  .ffcl{
    padding-top: 0.8rem;
  }
  .tabWrap{
      width: 100%;
      overflow-x: scroll;
  }
  .ffclTab{
    width: 100%;
    height: 0.88rem;
    background: white;
    font-size: 0;
  }
  .ffclTab p{
    display: inline-block;
    width: 25%;
    height: 100%;
    line-height: 0.88rem;
    font-size: 0.32rem;
    color: #999999;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }



  .ffclTab p a{
    color: #999999;
  }
  .ffclTab p.active  a{
    color: #e83329;
  }
  .ffclTab p.active{
    border-bottom: 0.02rem solid #e83329;
  }


  .ffclContent{
    padding: 0.2rem 0.32rem;
    background:#f9f5f5;
  }
  .ffclItemList{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    border-radius: 0.1rem;
    -webkit-border-radius: 0.1rem;
    background: white;
    padding: 0.2rem;
    margin-bottom: 0.2rem;

  }
  .ffclContentItem{
    display: none;
  }
  .ffclContentItem.active{
    display: block;
  }
  .ffclItemLeft,.ffclItemLeft img{
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.22rem;
  }
  .ffclItemRight{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
  .ffclTitle{
    font-size: 0.32rem;
    color: #333333;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: justify;
  }
  .ffclDate{
    font-size: 0.26rem;
    color: #999;
    padding-top: 0.2rem;
  }
  .ffclTopic{
    float: right;
  }
  .ffclScroll{
    width: 100%;
    overflow-x: scroll;
    height: 0.88rem;
  }
</style>
